<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>表单绑定</title>
		<script src="../static/vue.js"></script>
	</head>

	<body>
		<div id="app">

			<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
			<input type="radio" v-model="radioCheck" name="radio" id="radio" value="你选A" />
			<input type="radio" v-model="radioCheck" name="radio" id="radio" value="你选B" />
			<p>{{toggle}}</p>
			<p>{{radioCheck}}</p>

			<select v-model="selected">
				<!-- 内联对象字面量 -->
				<option v-bind:value="{ number: 123 }">123</option>
				<!-- 内联对象字面量 -->
				<option v-bind:value="{ number: 456 }">456</option>
				<!-- 内联对象字面量 -->
				<option v-bind:value="{ number: 789 }">789</option>
			</select>
			<p>{{selected.number}}</p>
			
			<!--.lazy
			在默认情况下，v-model 在每次 input 事件触发后将输入
			框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加
 			lazy 修饰符，从而转变为使用 change 事件进行同步：-->
 			
 			<input v-model.lazy="inputWithLazy" />
 			<p>{{inputWithLazy}}</p>
			
			<!--.number
			如果想自动将用户的输入值转为数值类型，可以给 v-model 
			添加 number 修饰符：-->
			<input v-model.number="inputWithNumber" type="number" />
			<p>{{inputWithNumber}}</p>
			<!--.trim
				如果要自动过滤用户输入的首尾空白字符，可以给 v-model
 				添加 trim 修饰符：-->
 			<input v-model.trim="inputWithTrim" />
			<p>{{inputWithTrim}}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					toggle: "",
					radioCheck: "你选A",
					selected:{
						number:"",
					},
					inputWithLazy:"",
					inputWithNumber:12,
					inputWithTrim:"",
				},
			
			})
		</script>
	</body>

</html>